import { ChangeEvent, useEffect, useState } from 'react'
import { Space, Input, Button, Flex } from 'antd'
import { useNavigate } from 'react-router-dom'
import styles from '@/views/Login/login.module.scss'
// 覆盖框架的样式文件
import './login.less'
import initLoginBg from './init.ts'

import captchaImg from '@/assets/images/capcha.gif'

function LoginView() {

    // 在组件函数执行完之后执行 - 生命周期
    useEffect(() => {
        initLoginBg()
        window.onresize = function () {
            initLoginBg()
        }
    }, [])

    // 定义编程式导航
    const navigateTo = useNavigate()

    // 获取用户名
    const [usernameVal, setUsernameVal] = useState('')
    const changeUsername = (e: ChangeEvent<HTMLInputElement>) => {
        setUsernameVal(e.target.value)
    }
    // 获取密码
    const [passwordVal, setPasswordVal] = useState('')
    const changePassword = (e: ChangeEvent<HTMLInputElement>) => {
        setPasswordVal(e.target.value)
    }
    // 获取用户输入的验证码
    const [captchaVal, setCaptchaVal] = useState('')
    const changeCaptcha = (e: ChangeEvent<HTMLInputElement>) => {
        setCaptchaVal(e.target.value)
    }

    // 点击登录按钮的事件
    const handleLogin = () => {
        console.log(`用户名：${usernameVal}，密码：${passwordVal}, 验证码：${captchaVal}`)
        navigateTo('/page1')
    }

    return (
        <div className={styles.loginPage}>
            {/* 背景 */}
            <canvas id='canvas' style={{ display: 'block' }}></canvas>
            <div className={styles.loginBox + " loginbox"}>
                {/* 标题部分 */}
                <div className={styles.title}>
                    <h1>KFC&nbsp;·&nbsp;人员管理系统</h1>
                    <p>Crazy Thursday</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                        <Input placeholder="用户名" allowClear onChange={changeUsername} />
                        <Input.Password placeholder="密码" allowClear onChange={changePassword} />
                        {/* 验证码盒子 */}
                        <div className="captchaBox">
                            <Input placeholder="验证码" allowClear onChange={changeCaptcha} />
                            <div className="captchaImg">
                                <img height="38" src={captchaImg} alt="" />
                            </div>
                        </div>
                        <Flex vertical gap="small" style={{ width: '100%' }}>
                            <Button type="primary" className="login-btn" onClick={handleLogin} >登录</Button>
                        </Flex>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default LoginView